<template>
	<view class="main">
		<!-- 商品名称设置 -->
		<view class="form-section">
			<view class="section-title">商品名称设置</view>
			<!-- 已添加的名称：弹性换行，适配小屏 -->
			<view class="goodname">
				<view class="good-name-item" v-for="(item, index) in form.goodNameList" :key="item.id">
					<view class="name_lable">
						<text>{{ index === 0 ? '商品名称:' : '别名' + index + ': ' }}</text>
					</view>
					<view class="name-content">
						{{ item.goodName }}
					</view>
					<view class="picdel" @click="delGoodName(item.id)">
						<uni-icons type="trash" size="24" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 添加名称：横向弹性布局，输入框占满剩余空间 -->
			<view class="add-name-section">
				<text>商品名称：</text>
				<input 
					@blur="handleblur" 
					v-model="form.goodName" 
					placeholder="输入商品名称（如：苹果）" 
					type="text" 
					class="form-input" 
				/>
				<view class="iconbtn" @click="addname">确定</view>
			</view>
		</view>

		<!-- 商品图片设置：图片预览区网格布局，适配不同屏幕 -->
		<view class="form-section">
			<view class="section-title" @click="uploadImg">商品图片设置</view>
			<view class="picker_pic">
				<uni-file-picker
					title="最多9张图片"
					limit="9"
					return-type="Array"
					:image-styles="imageStyles"
					mode="grid"
					file-mediatype="image"
					ref="files"
					:auto-upload="false"
					file-extname="png,jpg"
					@select="select"
					@progress="progress"
					@success="success"
					@fail="fail"
					:cloudPath="cloudPath"
					v-model="form.picpath"
				></uni-file-picker>
			</view>
		</view>

		<!-- 产品单位设置：垂直布局，避免横向溢出 -->
		<view class="form-section">
			<view class="section-title">产品单位设置</view>
			<!-- 已添加的单位：垂直排列，适配小屏 -->
			<view class="unit">
				<view class="unit-box" v-for="(item, index) in form.unitList" :key="item.id">
					<view class="unit-item">
						<view class="unit-title">{{ index === 0 ? '基本单位:' : '包装单位:' }} {{ item.unitName }}</view>
						<view v-if="index !== 0" class="unit-relation">
							{{ `1 ${item.unitName} = ${item.relationship} ${form.unitList[index - 1].unitName}` }}
						</view>
						<view class="unit-detail">条码: {{ item.barcode || '未设置' }}</view>
						<view class="unit-detail">体积: {{ item.volume || 0 }} 立方米</view>
						<view class="unit-detail">长: {{ item.length || 0 }} cm × 宽:{{ item.width || 0 }} cm × 高:{{ item.height || 0 }} cm</view>
						<view class="unit-detail">重量: {{ item.weight || 0 }} kg</view>
						<view class="picdel" v-if="index === form.unitList.length - 1" @click="delUnit(item.id)">
							<uni-icons type="trash" size="24" color="#fff"></uni-icons>
						</view>
					</view>
					<!-- 添加包装单位按钮：宽屏满宽，小屏自适应 -->
					<view class="packagebtn" v-if="index === form.unitList.length - 1" @click="isPackage = !isPackage">
						<text>继续为“{{ item.unitName }}”添加包装单位</text>
					</view>
				</view>
			</view>

			<!-- 单位表单：垂直布局，输入框占满宽度 -->
			<view class="unit-form" v-if="form.unitList.length === 0 || isPackage">
				<view class="unit-form-name">
					<view class="unit-form-name-item">
						<view class="title_name">
							<text>{{ form.unitList.length === 0 ? '基本单位：' : '包装单位：' }}</text>
						</view>
						<input 
							@blur="handleblur" 
							v-model="form.unit.unitName" 
							type="text" 
							class="form-input" 
							placeholder="如：个、kg、箱" 
						/>
					</view>
					<view class="unit-form-name-item">
						<view class="title_name">
							<text>条码:</text>
						</view>
						<input 
							@blur="handleblur" 
							v-model="form.unit.barcode" 
							type="number" 
							class="form-input" 
							placeholder="选填" 
						/>
					</view>
				</view>
				<!-- 换算关系：仅包装单位显示 -->
				<view class="unit-form-name" v-if="form.unitList.length > 0">
					<view class="title_name">
						<text>与“{{ form.unitList[form.unitList.length - 1].unitName }}”换算：</text>
					</view>
					<input 
						@blur="handleblur" 
						v-model="form.unit.relationship" 
						placeholder="如：1箱=12个填12" 
						type="number" 
						class="form-input" 
						style="width: 180rpx"
					/>
				</view>

				<!-- 长宽高：横向弹性，小屏自动换行 -->
				<view class="unit-form-long">
					<view class="unit-form-long-item" v-for="(dim, key) in { length: '长', width: '宽', height: '高' }" :key="key">
						<text>{{ dim }}：</text>
						<input
							@blur="handleblur"
							@focus="handleFocus(`unit.${key}`)"
							type="number"
							v-model="form.unit[key]"
							placeholder="cm"
							class="form-input"
							style="width: 120rpx"
						/>
					</view>
				</view>
				
				<!-- 体积重量：横向弹性 -->
				<view class="volum">
					<view class="volum_item">
						<text>体积:</text>
						<input 
							@blur="handleblur" 
							type="number" 
							v-model="form.unit.volume" 
							class="form-input" 
							style="width: 180rpx" 
							readonly 
						/>
						<text>立方米</text>
					</view>
					<view class="volum_item">
						<text>重量:</text>
						<input 
							@blur="handleblur" 
							v-model="form.unit.weight" 
							type="number" 
							class="form-input" 
							style="width: 180rpx" 
							placeholder="kg" 
						/>
					</view>
				</view>
				<!-- 提交按钮：居中显示，触控友好 -->
				<view class="sub_btn_box">
					<button class="sub_btn" size="mini" type="primary" @click="addunit">
						{{ form.unitList.length > 0 ? '添加包装单位' : '添加基本单位' }}
					</button>
				</view>
			</view>
		</view>

		<!-- 规格名设置：垂直布局，避免横向溢出 -->
		<view class="form-section">
			<view class="section-title">规格名设置</view>
			<view class="specs-list">
				<view class="specs-group" v-for="(specsCategorizeName, categoryIndex) in form.specsList" :key="categoryIndex">
					<!-- 规格分类（如：颜色） -->
					<view class="specs-item-cate">
						<text>{{ specsCategorizeName.specsCategorizeName }}</text>
						<view class="del_icon" @click="delSpecs(categoryIndex)">
							<uni-icons type="close" color="red" size="24"></uni-icons>
						</view>
					</view>
					<!-- 规格项（如：红色、蓝色）：弹性换行 -->
					<view class="specs-items-wrap">
						<view class="specs_item_name" v-for="(item, itemIndex) in specsCategorizeName.specsCategorizeItem" :key="itemIndex">
							<text>{{ item.name }}</text>
							<view class="del_icon" @click="removeSpecsItem(categoryIndex, itemIndex)">
								<uni-icons type="close" size="20"></uni-icons>
							</view>
						</view>
					</view>
					<!-- 添加规格项：输入框+按钮横向布局 -->
					<view class="specs-item-add">
						<input
							v-if="categoryIndex === selectCategoryIndex"
							type="text"
							v-model="form.cateItemName"
							placeholder="添加规格（如：红色）"
							class="form-input"
							style="flex: 1; margin-right: 15rpx"
						/>
						<view class="add_btn" @click="categoryIndex !== selectCategoryIndex ? handleAdd(categoryIndex) : addSpecsName(categoryIndex)">
							{{ categoryIndex !== selectCategoryIndex ? '添加' : '确定' }}
						</view>
					</view>
				</view>
			</view>
			<!-- 添加规格分类：垂直布局 -->
			<view class="specs-add-category">
				<view style="display: flex; align-items: center; margin-bottom: 20rpx">
					<view class="title_name">
						<text>规格分类名:</text>
					</view>
					<input 
						@blur="handleblur" 
						placeholder="如：颜色、尺寸、口味" 
						v-model="form.specsCategorizeName" 
						type="text" 
						class="form-input" 
						style="flex: 1" 
					/>
				</view>
				<view class="sub_btn_box">
					<button class="sub_btn" size="mini" type="primary" @click="addspecs">添加规格分类</button>
				</view>
			</view>
		</view>

		<!-- 储存要求设置：选择器占满剩余空间 -->
		<view class="form-section">
			<view class="section-title">储存要求设置</view>
			<view class="temperature-section">
				<text>温控类型：</text>
				<picker mode="selector" :range="form.tempratureList" @change="pickeTemperature" class="picker-selector">
					<view class="selector_item">
						<text>{{ form.temperature }}</text>
						<uni-icons type="down" size="22" color="white" style="margin-left: 15rpx"></uni-icons>
					</view>
				</picker>
			</view>
		</view>

		<!-- 商品信息描述：文本域自适应高度 -->
		<view class="form-section">
			<view class="section-title">商品信息描述</view>
			<view class="form-row">
				<view class="form-col-12" style="display: flex; align-items: center; margin-bottom: 20rpx">
					<text>保质期限:</text>
					<input 
						@blur="handleblur" 
						placeholder="输入天数（如：30）" 
						v-model="form.sellByData" 
						type="number" 
						class="form-input" 
						style="width: 180rpx" 
					/>
					<text>天</text>
				</view>
			</view>
			<view class="description-section">
				<text style="margin-bottom: 15rpx; display: block">商品详情描述:</text>
				<textarea 
					class="textarea" 
					@blur="handleblur" 
					v-model="form.description" 
					cols="30" 
					rows="10" 
					placeholder="描述商品特点、用途等（选填）" 
					auto-height
				></textarea>
			</view>
		</view>

		<!-- 提交按钮：满宽+大尺寸，触控友好 -->
		<view class="submit" @click="allSubmit">提交商品信息</view>
	</view>
</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
	data() {
		return {
			selectCategoryIndex: -1,
			// 图片样式用rpx，适配手机屏幕
			imageStyles: { width: 100, height: 100, border: { radius: 10 } },
			cloudPath: 'productPhoto',
			form: {
				unit: {
					id: '',
					unitName: '',
					barcode: '',
					height: 0,
					width: 0,
					length: 0,
					volume: 0,
					weight: 0,
					relationship: 1
				},
				KeyboardEvent:null,
				picpath: [],
				goodName: '',
				goodNameList: [],
				cateItemName: '',
				specsCategorizeName: '',
				unitList: [],
				specsList: [], // 规格
				photo: [],
				temperature: '常温(10-30度)',
				description: '',
				sellByData: 0,
				tempratureList: ['常温(10-30度)', '冷藏(0-10度)', '冷冻(-18度--30度)', '深冻(-30度以下)']
			},
			initData: null,
			isPackage: false,
			setTimeId: null
		};
	},
	computed: {
		// 计算体积（立方厘米转立方米，保留4位小数）
		computedVolume() {
			const unit = this.form.unit || {};
			const length = parseFloat(unit.length) || 0;
			const width = parseFloat(unit.width) || 0;
			const height = parseFloat(unit.height) || 0;
			return ((length * width * height) / 1000000).toFixed(4);
		}
	},
	beforeDestroy() {
		if (this.setTimeId) clearTimeout(this.setTimeId);
		uni.offKeyboardHeightChange(this.KeyboardEvent); // 移除键盘监听
	},
	watch: {
	 'form.unit.length': { handler: 'updateVolume', immediate: true },
	  'form.unit.width': { handler: 'updateVolume', immediate: true },
	  'form.unit.height': { handler: 'updateVolume', immediate: true }
	},
	mounted() {
		//初始化数据暂存用于恢复
		this.initData = JSON.stringify(this.form);
		// 适配键盘弹出：避免输入框被遮挡
		this.KeyboardEvent=(res) => {
	  this.$nextTick(() => {
	     const submitBtn = this.$refs.submitBtn;
	    if (submitBtn) {
	      submitBtn.$el.style.bottom = `${res.height + 30}rpx`;
	    }
	  })};
	uni.onKeyboardHeightChange(
	this.KeyboardEvent
	)
	},
	methods: {
		// 图片上传触发
		async uploadImg() {
			this.$refs.files?.choose();
		},
		// 图片选择回调
		select(e) {
			this.form.picpath = [...this.form.picpath, ...(e.tempFiles || [])];
		},
		progress(e) {
			console.log('上传进度：', e);
		},
		success(e) {
			console.log('上传成功：', e);
			this.form.photo = e.tempFiles || [];
			if (this.form.photo.length === this.form.picpath.length) {
				this.submit(this.form.photo);
			}
		},
		fail(e) {
			console.log('上传失败：', e);
			uni.showToast({ title: '图片操作失败', icon: 'none' });
		},
		// 自动计算体积
		updateVolume() {
			this.form.unit.volume = this.computedVolume;
		},
		// 提交前验证
		allSubmit() {
			if (this.form.goodNameList.length === 0) {
				this.showErr('商品名称');
				return;
			}
			if (this.form.unitList.length === 0) {
				this.showErr('产品单位');
				return;
			}
			// 触发图片上传
			this.$refs.files?.upload();
		},
		// 错误提示
		showErr(word) {
			uni.showToast({ icon: 'error', title: `${word}必填`, duration: 2000 });
		},
		// 隐藏键盘
		handleblur() {
			uni.hideKeyboard();
		},
		// 输入框聚焦：清空默认值
		handleFocus(key) {
			if (this.form.unit[key] === 0) this.form.unit[key] = '';
		},
		// 添加规格项
		addSpecsName(categoryIndex) {
			if (!this.form.cateItemName.trim()) {
				uni.showToast({ icon: 'error', title: '规格不能为空' });
				return;
			}
			this.form.specsList[categoryIndex].specsCategorizeItem.push({
				name: this.form.cateItemName.trim(),
				id: `spec-item-${Date.now()}`
			});
			this.form.cateItemName = '';
		},
		// 切换规格项输入状态
		handleAdd(index) {
			this.selectCategoryIndex = index;
			// 滚动到输入框位置
			this.$nextTick(() => {
				const input = document.querySelector(`.specs-item-add input`);
				input?.focus();
			});
		},
		// 删除规格项
		removeSpecsItem(categoryIndex, itemIndex) {
			this.form.specsList[categoryIndex].specsCategorizeItem.splice(itemIndex, 1);
		},
		// 添加商品名称
		addname() {
			if (!this.form.goodName.trim()) {
				uni.showToast({ title: '名称不能为空', icon: 'none' });
				return;
			}
			this.form.goodNameList.push({
				goodName: this.form.goodName.trim(),
				id: `good-name-${Date.now()}`
			});
			this.form.goodName = '';
		},
		// 添加单位
		addunit() {
			if (!this.form.unit.unitName.trim()) {
				uni.showToast({ icon: 'error', title: '单位名不能为空' });
				return;
			}
			// 计算换算关系（包装单位基于上一级单位）
			let relationship = 1;
			if (this.form.unitList.length > 0) {
				relationship = parseInt(this.form.unit.relationship) * this.form.unitList.at(-1).relationship;
			}
			// 新增单位
			const newUnit = {
				...this.form.unit,
				id: `unit-${Date.now()}`,
				relationship,
				unitName: this.form.unit.unitName.trim(),
				volume: this.computedVolume
			};
			this.form.unitList.push(newUnit);
			// 重置单位表单
			this.form.unit = {
				unitName: '',
				barcode: '',
				height: 0,
				width: 0,
				length: 0,
				volume: 0,
				weight: 0,
				relationship: 1
			};
			this.isPackage = false;
		},
		// 添加规格分类
		addspecs() {
			if (!this.form.specsCategorizeName.trim()) {
				uni.showToast({ title: '分类名不能为空', icon: 'none' });
				return;
			}
			this.form.specsList.push({
				specsCategorizeName: this.form.specsCategorizeName.trim(),
				specsCategorizeId: `spec-cate-${Date.now()}`,
				specsCategorizeItem: []
			});
			this.form.specsCategorizeName = '';
		},
		// 选择温控类型
		pickeTemperature(e) {
			this.form.temperature = this.form.tempratureList[e.detail.value];
		},
		// 删除商品名称
		delGoodName(id) {
			const index = this.form.goodNameList.findIndex((item) => item.id === id);
			index !== -1 ? this.form.goodNameList.splice(index, 1) : uni.showToast({ title: '未找到内容', icon: 'none' });
		},
		// 删除单位
		delUnit(id) {
			const index = this.form.unitList.findIndex((item) => item.id === id);
			index !== -1 ? this.form.unitList.splice(index, 1) : uni.showToast({ title: '未找到内容', icon: 'none' });
		},
		// 删除规格分类
		delSpecs(index) {
			const specs = this.form.specsList[index];
			if (specs.specsCategorizeItem.length > 0) {
				uni.showModal({
					title: '确认删除？',
					content: '将删除该分类及所有规格项',
					success: (res) => {
						if (res.confirm) this.form.specsList.splice(index, 1);
					}
				});
			} else {
				this.form.specsList.splice(index, 1);
			}
		},
		// 提交数据到数据库
		async submit(photo) {
			uni.showLoading({ title: '提交中...' });
			try {
				// 1. 验证图片
				const validPhotos = photo.filter((item) => item?.fileID);
				if (validPhotos.length === 0) throw new Error('请上传至少一张图片');
				// 2. 获取图片临时URL
				const tempRes = await uniCloud.getTempFileURL({
					fileList: validPhotos.map((item) => item.fileID)
				});
				// 3. 构造提交数据
				const newdata = {
					barcode: this.form.unitList.map((item) => item.barcode || ''),
					goodName: this.form.goodNameList,
					unit: this.form.unitList,
					specs: this.form.specsList,
					photo: validPhotos.map((item, i) => ({
						fileId: item.fileID,
						url: tempRes.fileList[i].tempFileURL
					})),
					temperature: this.form.temperature,
					description: this.form.description.trim(),
					sellByData: parseInt(this.form.sellByData) || 0,
					create_user:this.$store.state.msg.user.userId
			
				};
				// 4. 提交到数据库
				const res = await db.collection('product').add(newdata);
				if (res.id) {
					uni.showToast({ icon: 'success', title: '商品创建成功' });
					this.form = JSON.parse(this.initData); // 重置表单
					setTimeout(() => uni.navigateBack(), 1500);
				}
			} catch (e) {
				console.error('提交失败：', e);
				uni.showToast({ icon: 'none', title: e.message || '提交失败，请重试' });
			} finally {
				uni.hideLoading();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/* 基础样式：适配手机全屏 */
view {
	box-sizing: border-box;
}
.main {
	background-color: #f5f5f5;
	padding: 20rpx;
	min-height: 100vh;
	padding-bottom: 150rpx; /* 给提交按钮留空间 */
}

/* 表单区块：白色背景+圆角+阴影，手机端更精致 */
.form-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 25rpx;
	margin-bottom: 25rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 区块标题：加粗+下划线，区分层级 */
.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 25rpx;
	padding-bottom: 15rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

/* 输入框：统一样式，占满宽度，触控友好 */
.form-input {
	height: 80rpx;
	border: 2rpx solid #ddd;
	border-radius: 12rpx;
	padding: 0 20rpx;
	font-size: 26rpx;
	background-color: #fff;
}
.form-input:focus {
	border-color: #007aff;
	outline: none;
}

/* 1. 商品名称样式 */
.goodname {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	margin-bottom: 25rpx;
}
.good-name-item {
	display: flex;
	align-items: center;
	width: calc(50% - 8rpx); /* 每行2个，适配手机屏幕 */
	position: relative;
	background-color: #007aff;
	padding: 15rpx 20rpx;
	border-radius: 12rpx;
	min-height: 80rpx; /* 确保触控区域足够大 */
}
.name_lable {
	display: flex;
	margin-right: 10rpx;
	white-space: nowrap;
	font-size: 24rpx;
	color: #fff;
}
.name-content {
	font-size: 28rpx;
	font-weight: 500;
	color: white;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.add-name-section {
	display: flex;
	align-items: center;
	gap: 15rpx;
	background: #f9f9f9;
	border-radius: 12rpx;
	padding: 15rpx 20rpx;
}
.iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140rpx;
	height: 70rpx;
	color: white;
	border-radius: 35rpx;
	background-color: #007aff;
	font-size: 26rpx;
}

/* 2. 单位设置样式 */
.unit {
	display: flex;
	flex-direction: column;
	gap: 25rpx;
	margin-bottom: 25rpx;
}
.unit-item {
	background: #007aff;
	color: white;
	padding: 20rpx;
	border-radius: 12rpx;
}
.unit-title {
	font-weight: 500;
	font-size: 26rpx;
	margin-bottom: 10rpx;
}
.unit-relation {
	font-size: 24rpx;
	margin: 10rpx 0;
}
.unit-detail {
	font-size: 24rpx;
	margin: 5rpx 0;
}
.packagebtn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70rpx;
	color: white;
	border-radius: 35rpx;
	background-color: #007aff;
	margin-top: 15rpx;
}
.unit-form {
	background: #f9f9f9;
	padding: 20rpx;
	border-radius: 12rpx;
}
.unit-form-name,
.unit-form-long,
.volum {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15rpx 20rpx;
	margin-bottom: 20rpx;
}
.unit-form-name-item,
.unit-form-long-item,
.volum_item {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 280rpx; /* 小屏自动换行 */
}
.title_name {
	min-width: 120rpx;
	font-size: 26rpx;
	color: #666;
}
.sub_btn_box {
	display: flex;
	justify-content: center;
	margin-top: 20rpx;
}
.sub_btn {
	background-color: #007aff;
	color: #fff;
	border: none;
	border-radius: 35rpx;
	padding: 0 40rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 26rpx;
}

/* 3. 规格设置样式 */
.specs-list {
	display: flex;
	flex-direction: column;
	gap: 25rpx;
}
.specs-group {
	background-color: #f9f9f9;
	border-radius: 12rpx;
	padding: 20rpx;
}
.specs-item-cate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #55aaff;
	color: white;
	padding: 12rpx 20rpx;
	border-radius: 8rpx;
	margin-bottom: 15rpx;
}
.specs-items-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	margin-bottom: 20rpx;
}
.specs_item_name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #e1e1e1;
	color: #333;
	padding: 10rpx 15rpx;
	border-radius: 8rpx;
	min-width: 120rpx;
	max-width: calc(50% - 8rpx);
}
.specs-item-add {
	display: flex;
	align-items: center;
	gap: 15rpx;
}
.add_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 70rpx;
	color: white;
	border-radius: 35rpx;
	background-color: #007aff;
	font-size: 26rpx;
}
.specs-add-category {
	background-color: #f9f9f9;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-top: 25rpx;
}

/* 4. 储存要求样式 */
.temperature-section {
	display: flex;
	align-items: center;
	gap: 15rpx;
}
.picker-selector {
	flex: 1;
}
.selector_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70rpx;
	background-color: #007aff;
	color: white;
	border-radius: 12rpx;
	padding: 0 20rpx;
}

/* 5. 描述区域样式 */
.description-section {
	width: 100%;
}
.textarea {
	width: 100%;
	border: 2rpx solid #ddd;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 26rpx;
	min-height: 200rpx;
	background-color: #fff;
}

/* 6. 提交按钮：满宽+固定底部，触控友好 */
.submit {
	position: fixed;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	color: white;
	font-weight: 500;
	width: 90%;
	max-width: 600rpx;
	height: 90rpx;
	background-color: #007aff;
	border-radius: 45rpx;
	box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3);
}
.submit:active {
	background-color: #0063cc;
	transform: translateX(-50%) scale(0.98);
}

/* 公共删除按钮：圆形+红色背景，触控友好 */
.picdel {
	position: absolute;
	top: -15rpx;
	right: -15rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45rpx;
	height: 45rpx;
	border-radius: 50%;
	background-color: #e64340;
	z-index: 10;
}
.del_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40rpx;
	height: 40rpx;
	background-color: white;
	border-radius: 50%;
}

/* 全局文本样式：统一字体大小，提高可读性 */
text {
	font-size: 26rpx;
}
</style>

